<template>
    <el-aside class="nav-header el-header" style="width:100%;height:60px">
        <p class="title">
            流媒体管理后台
            <breadcrumb/>
        </p>
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{user}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-aside>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance,ref } from 'vue';
import breadcrumb from '@/components/breadcrumb/index.vue'
export default defineComponent({
    name: 'HeadTop',
    components:{
        breadcrumb
    },
    setup(){
        const instance: any = getCurrentInstance();
        const GL = instance.appContext.config.globalProperties;
        const PW: any = sessionStorage.getItem('PW');
        let user = (PW) ?  JSON.parse(PW).user : '游客';
        const colors = ref('#807aed')
        const onLogout = () => {
            localStorage.removeItem('TOKEN');
            sessionStorage.removeItem('PW');
            GL.$router.push({
                name: 'Login'
            });
        }
        const handleCommand = (command: string) => {
            if(command ==='loginOut'){
                onLogout()
            }
        }
        return {
            user,
            colors,
            handleCommand
        }
    }
});
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
